<template>
	<view class="serviceHall">
		<view class="top_horizontal_line"></view>
		<scroll-view class="scroll" scroll-y="true" @scroll="scrollContainer" @scrolltolower="onLoadMore">
			<view class="appointment_calendar_box">
				<!--				<view class="otherNum" v-if="tableData.info && tableData.info.length > 0">-->
				<!--					<view class="otherTitle">-->
				<!--						<view class="lable">其它账号待办</view>-->
				<!--						<view class="value" @click="changeAccountNum">-->
				<!--							<view class="valueText">查看全部</view>-->
				<!--							<uni-icons type="right" size="16"></uni-icons>-->
				<!--						</view>-->
				<!--					</view>-->
				<!--					<view class="otherMain" v-for="(item, index) in tableData.info" :key="index">-->
				<!--						<image :src="item.avatar" mode=""></image>-->
				<!--						<view class="name">-->
				<!--							<view>{{ item.nickName }}</view>-->
				<!--							<view class="explain">-->
				<!--								<text v-if="item.pendingOrderCount">待接单+{{ item.pendingOrderCount }}；</text>-->
				<!--								<text v-if="item.pendingApplyStudioCount">待修改的陪宠师申请+{{ item.pendingApplyStudioCount }}；</text>-->
				<!--								<text v-if="item.waitOrderCount">待服务+{{ item.waitOrderCount }}；</text>-->
				<!--								<text v-if="item.notReadMessageCount">未读消息+{{ item.notReadMessageCount }}</text>-->
				<!--							</view>-->
				<!--						</view>-->
				<!--					</view>-->
				<!--				</view>-->
				<template v-if="userInfo.orderTakingRight == 1">
					<!-- <view class="calendarWrap" :class="[isFixed ? 'fixed' : 'calendarWrap1000']">
						<uniCalendar ref="calendarRef" class="appointment_calendar" :date="date"
						:selected="tableData.selectedData"
						:insert="true" @change="change" :showMonth="false" />
						<view class="show" @click="calendarShowClick">
							{{calendarShow?"收起":'展开'}}
						</view>
					</view> -->
					<view class="calendarWrap" :class="[isFixed ? 'fixed' : '']" v-if="showCalendar">
						<uniCalendar
							ref="calendarRef"
							class="appointment_calendar"
							:date="date"
							:selected="tableData.selectedData"
							@monthSwitch="monthSwitch"
							:clearDate="true"
							:insert="true"
							@change="change"
							:showMonth="false" />
						<!-- <view class="show" @click="calendarShowClick">
							{{calendarShow?"收起":'展开'}}
						</view> -->
					</view>
					<!-- <view v-if="isFixed" :class="[calendarShow ?'heightUp' :'heightDown']"></view> -->
					<view class="order_list_item_box" v-if="tableData.list && tableData.list.length > 0">
						<view class="order_item_box" @click="toDetails(item)" v-for="item in tableData.list" :key="item">
							<view class="order_status_box">
								<view class="name_status">
									<view class="name_transfer">
										<image class="user_avatar_pic" :src="item.userAvatar"></image>
										<view class="studio_name">{{ item.userNickName }}</view>
										<view class="transfer_order" v-if="item.originStudioId != item.studioId">转单</view>
									</view>
									<view class="order_status">{{ getStatusText(item.status) }}</view>
								</view>
								<view class="order_date">订单号：{{ item.id }}</view>
							</view>
							<view class="studio_name_text">{{ item.studioName }}</view>
							<view class="order_server_info">
								<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="item?.orderGoodsSkuVOS?.length > 1">
									<view class="server_info_box" v-for="val in item.orderGoodsSkuVOS" :key="val.skuId">
										<image class="server_img" :src="val.goodsAvatar"></image>
										<view class="specs_box">{{ val.goodsName }}</view>
										<!-- <view class="server_price">×{{ val.serviceDays }}</view> -->
									</view>
								</scroll-view>
								<view class="server_info_box" v-else>
									<image class="server_img" :src="item?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
									<view class="name_price">
										<view class="server_name">{{ item?.orderGoodsSkuVOS[0]?.goodsName }}</view>
										<view class="specs_price">
											<text class="server_specs" v-if="item.type == 1">¥{{ item?.orderGoodsSkuVOS[0]?.price }}/次</text>
											<text class="server_specs" v-else>{{ item?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ item?.orderGoodsSkuVOS[0]?.price }}</text>
										</view>
									</view>
								</view>
								<view class="order_price_box">
									<view class="order_price">¥{{ item.payAmount }}</view>
									<view class="pay_text">{{ getPayText(item.status) }}</view>
								</view>
							</view>
							<view class="order_other_info_box">
								<view class="other_info_item" v-if="item.type != 1">
									<view class="other_label">宠物{{ item.petNum }}只</view>
									<view class="other_value">
										<text v-for="(val, valIndex) in item.petList" :key="valIndex">
											{{ val.petNickName }}({{ getPetTypeText(val.type) }})
											<text class="m_l_r_8" v-if="valIndex < item.petList.length - 1">|</text>
										</text>
									</view>
								</view>
								<view class="other_info_item">
									<view class="other_label">服务时间</view>
									<view class="other_value">{{ fulldate == "" ? getCurrentTime("year") : fulldate }} {{ item.doorTime }}</view>
								</view>
								<view class="other_info_item" v-if="item.type != 1">
									<view class="other_label">服务地址</view>
									<view class="other_value">{{ item.address }}</view>
								</view>
								<view class="other_info_item" v-if="item.joinId">
									<view class="other_label">关联订单</view>
									<view class="other_value">{{ item.joinId }}</view>
								</view>
								<view class="other_info_item" v-if="item.type == 1 && item?.petList?.length">
									<view class="other_label">服务宠物</view>
									<view class="other_value">
										<text class="pet_name_date" v-for="(val, i) in item.petList" :key="i">{{ val.petNickName }}</text>
									</view>
								</view>
							</view>
							<view class="pet_teacher_box">
								<view class="pet_teacher_title">下单用户</view>
								<image class="pet_teacher_img" :src="item.userAvatar"></image>
								<view class="pet_teacher_name">{{ item.userNickName }}</view>
							</view>
							<view class="pet_teacher_box" v-if="identity == 1 && item.status == 1 && item.petsitterUserId">
								<view class="pet_teacher_title">服务陪宠师</view>
								<image class="pet_teacher_img" :src="item.petsitterAvatar"></image>
								<view class="pet_teacher_name">{{ item.petsitterRealName }} | {{ item.petsitterNickName }}</view>
							</view>
							<view class="order_total_price">
								<text>{{ getPayText(item.status) }}：¥{{ Number(item.payAmount) }}</text>
								<template v-if="![0, 5, 6, 7].includes(item.status)">
									<text v-if="identity == 1">,工作室收益：¥{{ Number(item.studioSharing) }}</text>
									<text>,陪宠师收益：¥{{ Number(item.income) }}</text>
								</template>
							</view>
							<view class="operation_btn_box" v-if="userInfo.id == item.petsitterUserId">
								<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1].includes(item.status)" @click.stop="handleCancel(item)">取消订单</view>
								<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1].includes(item.status) && item.type != 1" @click.stop="handleConfirmArrival(item)">我已到达</view>
								<view class="xjs-btn-primary solid_btn btn_mg" v-if="[2].includes(item.status) && item.type != 1" @click.stop="handleDailyService(item)">服务完成</view>
								<!-- <view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[3].includes(item.status) && !item.uploadedDailyFlag" @click.stop="handleDailyService(item)">
									上传服务日常
								</view> -->
							</view>
						</view>
						<uni-load-more iconType="auto" :status="tableData.loading" />
					</view>
					<view class="empty_box" v-else>
						<image class="empty_img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png"></image>
						<view>这一天暂无预约～</view>
					</view>
				</template>
				<template v-else>
					<noOrderAccpermission ref="noOrderAccpermissionRef" />
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import uniCalendar from '@/pages/myStudio/uni_components/uni-calendar/components/uni-calendar/uni-calendar.vue'
import { ref, reactive, defineEmits, onMounted, computed } from "vue";
import dayjs from "dayjs";
import api from "@/api";
import noOrderAccpermission from "./components/noOrderAccpermission.vue";
import { useUserStoreToRefs } from "@/store/useUserStore";
import { useStudioStoreToRefs } from "@/store/useStudioStore";

let { studio, identity } = useStudioStoreToRefs();
const { userInfo } = useUserStoreToRefs();
const emit = defineEmits(["styleChange"]);
const date = ref(dayjs().format("YYYY-MM-DD"));
const calendarRef = ref();
const calendarShow = ref(false);
const isFixed = ref(false);
const noOrderAccpermissionRef = ref();
const fulldate = ref("");
const props = withDefaults(
	defineProps<{
		showCalendar: boolean;
	}>(),
	{
		showCalendar: true
	}
);
const tableData = reactive<{
	loading: string;
	page: number;
	limit: number;
	current: number;
	currentDate: string;
	list: any;
	info: any;
	selectedData: any;
}>({
	loading: "more",
	page: 1,
	limit: 20,
	current: -1,
	currentDate: "",
	info: [],
	list: [],
	selectedData: []
});

// 判断是不是主订单
const isMainOrder = computed(() => (item) => {
	let res = item?.orderGoodsSkuVOS?.some((val) => {
		return [1, 2, 3].includes(val.goodsType);
	});
	return res;
});

// 判断是不是子订单
const isSonOrder = computed(() => (item) => {
	let res = item?.orderGoodsSkuVOS?.every((val) => {
		return val.goodsType == 4;
	});
	return res;
});

// let selectedData = reactive([{
//   date: '2025-04-2',
//   info: '10单',

// },]);
const getStatusText = (status) => {
	switch (status) {
		case 1:
			return "待服务";
		case 2:
			return "服务中";
		case 3:
			return "已完成";
		case 4:
			return "已取消";
		case 5:
			return "已取消";
		default:
			return "";
	}
};
const getPayText = (type) => {
	switch (type) {
		case 4:
		case 5:
			return "合计";
		default:
			return "实付";
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
onMounted(async () => {
	setTimeout(async () => {
		// await onDataInit()
	}, 100);
});

const changeAccountNum = () => {
	uni.navigateTo({
		url: `/pages/setting/changeAccountNumber/index`
	});
};

//页面滚动高度
const scrollContainer = (e) => {
	let scrollTop = e.detail.scrollTop;
	isFixed.value = scrollTop > 130 ? true : false;
};

const change = (data) => {
	console.log(data, "change");
	fulldate.value = data.fulldate;
	onDataGet(data.fulldate);
};

const monthSwitch = async (data) => {
	console.log(data);
	tableData.currentDate = data.year + "-" + repair(data.month);
	await dateList(tableData.currentDate);
	tableData.list = [];
	tableData.page = 1;
	fulldate.value = "";
};

const toDetails = (item: any) => {
	if (item.type == 1) {
		uni.navigateTo({
			url: `/pages/studioOrders/addedServicesDetail/index?id=${item.id}&orderType=${0}`
		});
	} else {
		uni.navigateTo({
			url: `/pages/studioOrders/orderDetail/index?id=${item.id}&orderType=${0}`
		});
	}
};

//当前时间
const getCurrentTime = (type = "date", time = "") => {
	let date = time == "" ? new Date() : new Date(time); //当前时间
	let year = date.getFullYear(); //年
	let month = repair(date.getMonth() + 1); //月
	let day = repair(date.getDate()); //日
	let hour = repair(date.getHours()); //时
	let minute = repair(date.getMinutes()); //分
	let second = repair(date.getSeconds()); //秒

	let curTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

	if (type == "date") {
		return curTime;
	} else if (type == "month") {
		return month + "/" + day;
	} else if (type == "year") {
		return year + "-" + month + "-" + day;
	} else {
		return hour + ":" + minute;
	}
};

const repair = (i) => {
	if (i >= 0 && i <= 9) {
		return "0" + i;
	} else {
		return i;
	}
};

const filterEmpty = () => {
	// console.log(tableData.selectedData.find((item) => item.date=== '2025-04-03')?.num,'filterEmpty')
	return tableData.selectedData.find((item) => item.date === getCurrentTime("year", item.serviceStartTime))?.num;
};

// 确认到达
const handleConfirmArrival = async (item) => {
	await handleOrderStatusChange(item);
	// 检查服务时间是否是今天
	if (!dayjs(dayjs(item.serviceStartTime, "YYYY-MM-DD")).isSame(dayjs())) {
		uni.showModal({
			title: "温馨提示",
			content: "服务单服务时间非今天，\n" + "确定提前到达开始服务吗？",
			confirmText: "确定",
			cancelText: "取消",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/confirmArriving/index?orderId=${item.id}&studioId=${studio.value.id}`
					});
				}
			}
		});
	}
};

const getOtherDayOrder = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/order-detail/getJoinOrderDetail`,
			data: {
				orderId: item.orderId,
				orderDetailId: item.id
			}
		});
		if (res.code == 0) {
			if (res.data.length > 1) {
				resolve(true);
			} else {
				resolve(false);
			}
		} else {
			reject(false);
		}
	});
};

// 日单取消订单
const handleCancel = async (item) => {
	await handleOrderStatusChange(item);
	const res = await getOtherDayOrder(item);
	if (res) {
		uni.navigateTo({
			url: `/pages/studioOrders/cancellationOrder/index?orderId=${item.orderId}&orderDetailId=${item.id}&orderType=${0}`
		});
	} else {
		uni.showModal({
			title: "确定取消订单吗？",
			content: "注意：确定后订单将关闭",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/studioOrders/cancellationReason/index?orderId=${item.orderId}&orderDetailId=${item.id}&checkedList=${item.id}&orderType=${0}`
					});
				}
			}
		});
	}
};

// 判断订单状态变更
const handleOrderStatusChange = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/checkOrderStatus?orderId=${item.id}&status=${item.status}&type=0`
		});
		if (res.code == 0) {
			if (res.data == 1) {
				uni.showModal({
					title: "提示",
					content: "数据已过期，请刷新重试",
					showCancel: false,
					confirmText: "好的",
					success: (res) => {
						if (res.confirm) {
							onDataInit();
						}
					}
				});
				reject(false);
			} else {
				resolve(true);
			}
		} else {
			reject(false);
		}
	});
};

// 服务完成
const handleEndServer = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
					await onDataInit();
				}
			}
		});
	} else {
		uni.showModal({
			title: "提示",
			content: "确定完成服务吗？",
			success: async (res) => {
				if (res.confirm) {
					const res = await api({
						method: "post",
						url: `/mall/order/order-detail/finishV2`,
						data: {
							id: item.id
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "服务完成",
							icon: "none"
						});
						uni.navigateTo({
							url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}
			}
		});
	}
};

//服务完成
const handleDailyService = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
					await onDataInit();
				}
			}
		});
	} else {
		uni.navigateTo({
			url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
		});
	}
};

const dateList = async (time = "") => {
	let date = new Date();
	let year = date.getFullYear(); //年
	let month = repair(date.getMonth() + 1); //月
	const res = await api({
		method: "get",
		url: `/mall/order/order-detail/getDayList`,
		data: {
			yearMonth: time == "" ? year + "-" + month : time
		}
	});
	(tableData.selectedData =
		res.data && res.data.length > 0
			? res.data.map((v) => {
					return {
						date: getCurrentTime("year", v.serviceStartTime),
						info: v.orderNum + "单",
						num: v.orderNum
					};
			  })
			: []),
		(tableData.selectedData = Array.from(tableData.selectedData));
	filterEmpty();
	// console.log(tableData.selectedData,'45454')
};

// 数据初始化
const onDataInit = async () => {
	tableData.list = [];
	tableData.page = 1;
	await getInfo();
	if (userInfo.value.orderTakingRight != 1) {
		noOrderAccpermissionRef.value && noOrderAccpermissionRef.value.getExam();
	} else {
		await dateList(tableData.currentDate);
		await onDataGet(fulldate.value);
	}
};

const getInfo = async () => {
	uni.getSystemInfo({
		success: async (e) => {
			let deviceId = "";
			// #ifdef APP
			deviceId = e.deviceId;
			// #endif
			const res: any = await api({
				method: "get",
				url: `/mall/user/getOtherAccountTodo?deviceId=${deviceId}`
			});
			if (res.data && res.data.length > 0) {
				tableData.info = [res.data[0]];
			} else {
				tableData.info = res.data;
			}
		}
	});
};

// 获取数据
const onDataGet = async (time = "") => {
	return new Promise(async (resolve, reject) => {
		tableData.loading = "loading";
		try {
			const {
				data: { total = 0, records = [] }
			} = await api({
				method: "get",
				contentType: "json",
				url: "/mall/order/order-detail/page",
				data: {
					page: tableData.page,
					limit: tableData.limit,
					studioId: studio.value.id,
					serviceStartTime: time == "" ? getCurrentTime("year") : time
				}
			});
			tableData.list = tableData.page == 1 ? records : tableData.list.concat(records);
			if (!records.length || tableData.list.length >= total) {
				tableData.loading = "noMore";
			} else {
				tableData.loading = "more";
			}
			resolve(true);
		} catch (error) {
			tableData.loading = "more";
			reject(false);
		}
	});
};

const calendarShowClick = () => {
	calendarShow.value = !calendarShow.value;
	emit("styleChange", calendarShow.value);
};

// 页面下拉刷新
const onRefresh = async () => {
	console.log("onPullDownRefresh");
	if (tableData.loading == "loading") {
		uni.stopPullDownRefresh();
	} else {
		try {
			await onDataInit();
		} catch (error) {}
		uni.stopPullDownRefresh();
	}
};

// 触底
const onLoadMore = () => {
	console.log("onReachBottom");
	if (tableData.loading == "noMore") return false;
	tableData.page++;
	onDataGet();
};
defineExpose({ onRefresh, onLoadMore, onDataInit, dateList });
</script>

<style scoped lang="scss">
.scroll {
	height: calc(100vh - var(--safe-area-bottom) - 88rpx - 112rpx);
	/* #ifdef APP-PLUS */
	height: calc(100vh - var(--safe-area-bottom) - 88rpx - 112rpx - 88rpx);
	/* #endif */
}

.heightUp {
	height: 750rpx;
}

.heightDown {
	height: 300rpx;
}

// .fixed{
// 	position: fixed !important;
//    top: 0;
//    box-sizing: border-box;
//    // width: 100%;
//    z-index: 1000;
// }
.calendarWrap1000 {
	position: fixed !important;
	left: -100vw;
	width: 100%;
	z-index: 1000; /* 确保在内容之上 */
}

.otherNum {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	box-sizing: border-box;
	margin-bottom: 32rpx;

	.otherTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lable {
			font-weight: bold;
			font-size: 36rpx;
			color: #1b2120;
		}

		.value {
			display: flex;
			align-items: center;

			.valueText {
				font-size: 24rpx;
				color: #7c807f;
			}
		}
	}

	.otherMain {
		display: flex;
		align-items: center;
		margin-top: 52rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.name {
			margin-left: 16rpx;
			font-size: 32rpx;
			color: #1b2120;

			.explain {
				margin-top: 16rpx;
				font-size: 26rpx;
				color: #7c807f;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

.calendarWrap {
	position: relative;

	.show {
		// width: 80rpx;
		// text-align: right;
		// position: absolute;
		// right: 12rpx;
		// bottom: 4rpx;
		// font-size: 24rpx;
		// color: #7C807F;
		position: absolute;
		left: 0;
		top: 13px;
		padding: 0 5px;
		padding-left: 10px;
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		color: #333;
		background-color: #f1f1f1;
	}
}

.top_horizontal_line {
	position: sticky;
	top: 0;
	width: 100%;
	border-top: 1rpx solid #e4e6e6;
	z-index: 1;
}

.appointment_calendar_box {
	padding: 34rpx 32rpx;
	box-sizing: border-box;
}

.empty_box {
	text-align: center;
	font-weight: 400;
	font-size: 32rpx;
	color: #1b2120;
	padding-bottom: 160rpx;

	.empty_img {
		width: 400rpx;
		height: 315rpx;
		margin-top: 122rpx;
		margin-bottom: 50rpx;
	}
}

.order_list_item_box {
	padding: 24rpx 0 24rpx;
	box-sizing: border-box;
	// padding-bottom: calc(var(--safe-area-bottom) + 48rpx + 100rpx);
	//padding-bottom: calc(var(--safe-area-bottom) + 100rpx);

	.order_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.order_status_box {
			.name_status {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_transfer {
					display: flex;
					flex-direction: row;
				}

				.user_avatar_pic {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background: #f9f6f6;
					margin-right: 16rpx;
				}

				.studio_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1b2120;
				}

				.transfer_order {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 8rpx;
					box-sizing: border-box;
					height: 40rpx;
					background: #7777f3;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					margin-left: 8rpx;
				}

				.order_status {
					font-weight: 400;
					font-size: 26rpx;
					color: #6363ff;
				}
			}

			.order_date {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin-top: 16rpx;
			}
		}

		.studio_name_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
			margin-top: 48rpx;
			border-bottom: 1rpx solid #e4e6e6;
			padding-bottom: 24rpx;
			box-sizing: border-box;
		}

		.order_server_info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.server_info_box {
				display: flex;
				align-items: center;
				flex-direction: row;
				width: calc(100% - 120rpx - 16rpx);

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
				}

				.name_price {
					margin-left: 16rpx;
					max-width: calc(100% - 120rpx - 16rpx);

					.server_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.specs_price {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						.server_specs {
						}

						.server_price {
						}
					}
				}
			}

			.multiple_specs_scroll {
				white-space: nowrap;
				width: calc(100% - 128rpx);

				.server_info_box {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					position: relative;
					margin-right: 16rpx;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.specs_box {
						position: absolute;
						top: 8rpx;
						left: 8rpx;
						max-width: 98rpx;
						background: #f9f6f6;
						border-radius: 4rpx;
						font-weight: 400;
						font-size: 18rpx;
						color: #1b2120;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.server_price {
						position: absolute;
						bottom: 0;
						right: 0;
						padding: 8rpx 10rpx;
						box-sizing: border-box;
						background: rgba(0, 0, 0, 0.35);
						border-radius: 24rpx 0rpx 24rpx 0rpx;
						font-weight: bold;
						font-size: 18rpx;
						color: #ffffff;
					}
				}
			}

			.order_price_box {
				width: 128rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

				.order_price {
					font-weight: bold;
					font-size: 28rpx;
					color: #1b2120;
				}

				.pay_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}

		.order_other_info_box {
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.other_info_item {
				display: flex;
				flex-direction: row;
				margin-bottom: 40rpx;

				.other_label {
					width: 96rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #5c5e5e;
				}

				.other_value {
					max-width: calc(100% - 96rpx - 16rpx);
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-left: 16rpx;

					.pet_name_date {
						display: inline-block;
						// margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-right: 24rpx;
					}
				}
			}

			.other_info_item:last-child {
				margin-bottom: 0;
			}
		}

		.pet_teacher_box {
			display: flex;
			align-items: center;
			flex-direction: row;
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.pet_teacher_title {
				width: 130rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #5c5e5e;
			}

			.pet_teacher_img {
				margin-left: 16rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}

			.pet_teacher_name {
				margin-left: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #7c807f;
			}
		}

		.order_total_price {
			text-align: right;
			margin-top: 16rpx;
			//margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
		}

		.operation_btn_box {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.hollow_btn {
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.solid_btn {
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.btn_mg {
				margin-right: 16rpx;
			}

			.btn_mg:last-child {
				margin-right: 0;
			}

			.refuse_btn {
				width: 240rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.accept_immediately_box {
				text-align: center;
				width: 366rpx;
				height: 72rpx;
				background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
				border-radius: 62rpx;
				font-weight: 400;
				color: #ffffff;
				padding: 10rpx 0 8rpx;
				box-sizing: border-box;
				line-height: 1;
				margin-left: 16rpx;
				margin-bottom: 40rpx;

				.accept_immediately {
					font-size: 26rpx;
				}

				.immediately_time {
					font-size: 20rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
}
</style>
